<template>

  <div class="page-navbar main">
    <!-- navbar -->
    <section class="finance-tabs">
        <div class="finance-btn">
              <button class="tab-exchange "  v-on:click="otcTab(otcTabs)"><span class="otc-exchange-tab" v-bind:class="{'active':otcTabs==true}">购买USDT</span></button>
            <button class="tab-otc "  v-on:click="otcTab(otcTabs)" ><span class="otc-exchange-tab" v-bind:class="{'active':otcTabs==false}">出售USDT</span></button>
        </div>
            <router-link to="/order" class="tabs"><img class="img" src="../../assets/dingdan.png" ></router-link>
    </section>
    <div class="exchange"> 交易市场</div>
	<!-- tabcontainer -->
    <div class="tabcontainer">
        <section class="finance-list">
                <div class="padding" v-for="(orderData, i) in orderDataList" v-bind:key="i">
                    <div class="flex-col">
                        <div class="trade-name flex-row flex-between">
                            <div class="trade-tab">
                                <div class="title" >{{orderData.fuser.frealName.substring(0,1)}}</div>
                                <div class="order-name">{{orderData.fuser.frealName}}</div>
                            </div>
                            <div class="wc">成交{{orderData.fuser.otcTimes}}单|成交率{{orderData.fuser.otcSuccessRate?orderData.fuser.otcSuccessRate:"100%"}}</div>
                        </div>
                        <div class="trade-limit flex-row flex-between">
                            <div>限额：{{orderData.minAmount}}-{{orderData.maxAmount}} USDT</div>
                            <div>{{orderData.price}} CNY</div>
                        </div>
                        <div class="trade-number">数量：{{orderData.amount - orderData.successAmount - orderData.frozenAmount}} USDT</div>
                        <div class="trade-type flex-row flex-between">
                            <div class="img" >
                                  <img v-if="pay(orderData.payWay,1)" src="../../assets/weixin.png">
                                <img style="margin-left: 10px;margin-right: 10px;" v-if="pay(orderData.payWay,2)" src="../../assets/shape.png">
                                <img v-if="pay(orderData.payWay,3)" @click="bankShow()" src="../../assets/bank.png">
                            </div>
                                <div class="limit-box"
                                                v-show="orderData.kycType==1&&!sessionData.authDeep">
                                    <span class="orderDataButton" @click="authentication()">
                                        <a class="authentication" >高级认证</a>
                                    </span>
                                </div>
                                <div class="trade-btn-control"
                                    v-show="orderData.kycType==0||sessionData.authDeep">
                                    <div>
                                        <div class="otc-btn-sytle">
                                            <button @click="addSpecs(orderData)"
                                                class="btn font12 cursor default button"
                                                ><span class="icon-space"></span>
                                                <span v-if="orderData.type==1" 
                                                    >买入</span>
                                                <span v-if="orderData.type==0"
                                                    >卖出</span> USDT
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <div v-if="orderDataList.length==0" class="data-img">
                    <img src="../../assets/coin-code.png">
                    <p >暂无挂单</p>
                </div>
        </section>
    </div>
    <div class="add" v-if="addOtcImg">
        <span @click="addOtc()"><img src="../../assets/addOtc.png" class="add-otc-img"></span>
    </div>
</div>
</template>
<script>
   import {mapMutations, mapActions} from 'vuex';
    import { Indicator } from 'mint-ui';
    import { Toast } from 'mint-ui';
    import {getLang} from '../../components/util/language/cn';
export default {
      components: {},
    name:'home',
    data() {
    return {
      otcTabs: true,
          orderDataList:[],
          fid:'',
          isLogin:null,sessionData:'',
          addOtcImg:false
        };
    },
    created() {
        Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
        });
    },
       mounted() {
           this.getSession();
          this.getOtcList(); 
       },
     methods: {
        //   ...mapActions([
        //         'getUserInfo'
        //     ]),
            ...mapMutations([
                'ADD_CART'
            ]),
        //             loadMore() {
        //                 console.log('dsf')
        //    this.isMoreLoading = true;
        //       this.isLoading = true;
        //       this.noMore = false;
        //   setTimeout(() => {
        //       console.log(this.isLoading)
        //     let last = this.newsList[this.newsList.length - 1];
        //     for (let i = 1; i <= 10; i++) {
        //       this.newsList.push(last + i);
        //     }
        //     this.isLoading = false;
        //     this.noMore = false;
        //         this.isMoreLoading = false;
        //   }, 1000);
        // },
        authentication(){
             if(this.isLogin==0){
                   this.$router.push("/login");
                   return;
            }
            if(!this.sessionData.authDeep){
                  this.$router.push("/real");
                return
            }
        },
        addOtc(){
            if(this.isLogin==0){
                   this.$router.push("/login");
                   return;
            }
              this.$http.post('v1/getOtcList', {page: 1,pageSize: 10}).then((res) => {
                    let data=res.data;
                    if(  this.sessionData.authDeep){
                         if(data.totalCount==0){
                                Toast('请先到网页版申请法币发布权限');
                             return; 
                        }else{
                        this.$router.push("/poster");
                        return;
                    }
                }else{
                Toast("请先完成实名认证");
            }
        })
        },
           addSpecs(orderData){
               let lang=getLang;
               if(this.isLogin==0){
                   this.$router.push("/login");
                   return;
               }
                    if(!this.sessionData.mobile){
                        Toast(lang.noPhoneVerify);
                        return
                    }
                    if(!this.sessionData.safeword){
                        Toast(lang.c2c.otc_password);
                        return
                    }
                    if(!this.otcTabs){
                        if(!this.sessionData.has_otc_set){
                        Toast(lang.c2c.otc_apply);
                        return
                        }
                    }
                this.ADD_CART({order_list: orderData,});
               this.$router.push({ name: 'over',query: {type: this.otcTabs?0:1} });
            },
      otcTab(type){
         this.otcTabs=!type;
         if(this.otcTabs){
            this.orderDataList = []
            Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            });
             this.getOrders(1)
         }else{
            this.orderDataList = []
            Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            });
            this.getOrders(0)
         }
     },
           getSession () {
      this.$http.post('v1/session?'+ new Date().getTime(), {func:""}).then((res) => {
        if(res.data.code==1){
            this.isLogin=0;
        }else if(res.data.code==200){
            this.sessionData=res.data.data;
        }
      })
    },
     getOtcList(){
       this.$http.post('v1/getOtcList?', {page: 1,pageSize: 10}).then((res) => {
           let data=res.data;
           let fid;
            if (data.code == 200) {
                 if(data.totalCount==0){
                        this.addOtcImg=false;
                    }else{
                          this.addOtcImg=true;
                    }
                    for (let i = 0; i < data.data.length ; i++) {
                        if(data.data[i].fShortName=='USDT'){
                              this.fid=data.data[i].fid;
                        }
                    }
                if(localStorage.getItem("overType")==0||localStorage.getItem("overType")==null){
                    this.otcTabs=true;
                    this.getOrders(1);
                }else if(localStorage.getItem("overType")==1){
                        this.getOrders(0);
                    this.otcTabs=false;
                }
            }
      })
    },
     getOrders(state) {
         let id=1;
            this.$http.post('v1/listOtcOrders?cid='+this.fid+'&type='+state, ).then((res)=>{
                  let data=res.data;
                 if (data.code == 200) {
                    let list = data.data;
                    let len = list.length;
                  this.orderDataList=[];
                    for (let i = 0; i < len; i++) {
                        let order = list[i];
                        if  (order.type == 0) {
                       this.orderDataList.push(order);
                        // pay_area = order.otcOrder.type = '<em>以下是卖家的收款方式</em>' + payWay;
                        }else if(order.type == 1){
                             order = list[i];
                             this.orderDataList.push(order)
                        }
                    }
                       Indicator.close();
                }
            })
        },
        pay(res,index){
            if(index==1){
            return  res.split(",").indexOf('2')>=0;
            }else if(index==2){
            return  res.split(",").indexOf('1')>=0;
            }else if(index==3){
            return  res.split(",").indexOf('0')>=0;
            }
        }
     },
        destroyed() {
            localStorage.removeItem("overType");
        },
}
</script>
<style scoped>  
.page-finance  section.finance-tabs {
    height: 108px;
    display: -ms-flexbox;
    display: flex;
    left: 0;
    width: 750px;
    z-index: 1;
}
.newsList li{
    height: 120px;
}
.page-finance  section.finance-tabs button {

    color: #8c9fad;
    position: relative;
    font-size: 32px;
   width: 200px;
    font-weight: 700;
}
.finance-btn{
    width: 94%;
    display: flex;
    justify-content: center;
    position: relative;
    left: 30px;
}
.otc-exchange-tab{
    width: 200px;
    height: 60px;
    font-weight: 500;
}
.trade-type img{
    width: 32px;
    height: 32px;
}
.orderDataButton{
    width:166px;
height:60px;
border-radius:8px;
border:2px solid rgba(51,129,255,1);
text-align: center;
line-height: 60px;
position: relative;
top:-30px
}
.page-finance .page-navbar .finance-tabs  {

    color: #8c9fad;
    position: relative;
    font-size: 32px;
    -ms-flex: 1;
    flex: 1;
    font-weight: 700;
}
.add{
    position: fixed;
    bottom: 140px;
    right: 40px;
    z-index: 9;
}
.add img{
    width: 120px;
    height: 120px;
}
.tabs .img{
    width: 40px;
    height: 40px;
    position: relative;
    right: 20px;
    top:30px;
}
.page-finance .page-navbar .order-name{
    margin-left: 20px;
    line-height: 40px;
}
.main .buy span {
    text-align: center;
    width: 150px;
}
.flex-content{
      display: -ms-flexbox;
    display: flex;
    justify-content: center;
}
 .tab{
display: flex;
background:rgba(255,255,255,1);
height: 100px;
border:1px solid #e7ebee
}
.active{
    color: #5298F1;
    border-bottom:4px solid #5298F1;
}
.main .buy {
    width: 50%;
    height: 100px;
    line-height: 100px;
}
 .data-img{
    min-height: 800px;
      height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}
.button{
    width:163px;
height:60px;
background:rgba(82,152,241,1);
border-radius:8px;
font-size: 24px;
border-radius:4px;
position: relative;
bottom: 20px;
text-align: center;
line-height: 50px;
color: #fff;
}
.wc{
    color: #8686E1;
    font-size:24px;
}
    .flex-row{
        display: flex;
        flex-direction: row
    }
    .flex-between{
        justify-content: space-between;
    }
    .finance-list{
            width: 92%;
            margin: 0 auto;
            padding-bottom: 120px;
            min-height: 600px;
    }
    .loading-box{
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center
    }
     section.finance-list .padding {
        margin-top: 30px;
        margin-bottom: 20px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-top: 30px;
        background:rgba(34,34,64,1);
        box-shadow:0px 0px 6px 0px rgba(0,0,0,0.1);
        border-radius:8px;
        padding-left: 25px;
        padding-right: 25px;
        height: 240px;
        box-sizing: border-box;
    }

.exchange{
    height: 80px;
    line-height: 80px;
    font-weight:500;
    font-size:32px;
    margin-left: 40px;
}
    .flex-col{
        height: 220px;
        flex-direction: column;
        display: flex;
        width: 100%;
    }
    section.finance-list .trade-name{
        height: 60px;
    }
    .trade-tab{
        width: 30%;
        display: flex;
    }
      section.finance-list .trade-name .title{
        font-size: 24px;
        background: #7DAFFF;
        border-radius: 50%;
        width: 40px;
        text-align: center;
        line-height: 40px;
        height: 40px;
    }
    section.finance-list .trade-limit{
        height: 40px;
    }
    section.finance-list .trade-limit>div:nth-child(1){
        font-size: 24px;
    }
    section.finance-list .trade-limit>div:nth-child(2){
        font-size: 32px;
    }
    section.finance-list .trade-type{
        height: 50px;
    }
    section.finance-list .trade-number{
        height: 50px;
        font-size: 24px;
    }
    .page-navbar .mint-tab-item{
        font-size: 32px;
    }
    .main{
    color: #E0E0F9;
    background: #161736;
}
</style>